<template>
	<view>
		<view class="sign_conent_box">
			<view class="sign_conent">
				<view class="sign_conent_title">
					你已连续签到
					<span class="sign_conent_title_span">{{day}}</span>
					天
				</view>
				<view class="sign_list_aligns">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="scroll_view_items" v-for="(item, index) in sign_list" :key="item.day">
							<!--  -->
							<view class="scroll_view_itemsv">
								<view class="scroll_view_item">
									<view class="scroll_view_item_img_box">
										<image :src="day < item.day ? '../../pagesC/static/img/circle_2.png' :'../../pagesC/static/img/circle.png'" class="scroll_view_item_img" mode="">
										</image>
										<!-- 	<view class="scroll_view_item_top">{{ item.discount }}</view>
										<view class="scroll_view_item_bottom">一张</view> -->
									</view>
									<view class="scroll_view_item_tips" :class="{active:day >= item.day}">{{ item.day }}天</view>
								</view>
								<!-- <view class="scroll_xian" v-show="index !== sign_list.length - 1"></view> -->
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="sign_conent_btn" @click="cksigin" v-if="isLogin">今日签到</view>
				<view class="sign_conent_btn"  v-else style="background-color: #999999">已签到</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				isLogin:true,
				day: 3,
				sign_list: [{
				
						day: '1'
					},
					{
					
						day: '2'
					},
					{
					
						day: '3'
					},
					{
					
						day: '4'
					},
					{
				
						day: '5'
					},
					{
					
						day: '6'
					}, {
				
						day: '7'
					}
				]
			};
		},
		methods: {
			cksigin() {
				this.$emit('click', '');
				if(this.day < 7){
					this.day ++
				}
				this.isLogin=false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.sign_conent_box {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 50rpx;

		.sign_conent {
			width: 670rpx;
			background: white;
			border-radius: 20rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			margin-top: -32rpx;

			.sign_conent_title {
				width: 100%;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;

				.sign_conent_title_span {
					color: #ff6526 !important;
				}
			}

			.sign_list_aligns {
				width: 100%;
				padding: 10rpx 0 30rpx 0;
				box-sizing: border-box;

				.scroll-view_H {
					width: 100%;
					display: flex;
					white-space: nowrap;

					.scroll_view_items {
						display: inline-block;
					}

					.scroll_view_itemsv {
						display: flex;
					}

					.scroll_view_item {
						.scroll_view_item_img_box {
							width: 90rpx;
							height: 45rpx;
							position: relative;

							.scroll_view_item_top {
								font-size: 20rpx;
								color: #bf8d46;
								font-weight: bold;
								position: absolute;
								top: 32rpx;
								width: 100%;
								text-align: center;
								z-index: 1;
							}

							.scroll_view_item_bottom {
								font-size: 12rpx;
								color: #ffe29d;
								position: absolute;
								bottom: 18rpx;
								left: 42rpx;
								z-index: 2;
							}
						}

						.scroll_view_item_tips {
							width: 80rpx;
							text-align: center;
							font-size: 26rpx;
							padding-top: 16rpx;
							color: #333333;
							color: #D1D1D1;
						}
						.active{
							color: #333333
						}
						.scroll_view_item_img {
							width: 30rpx;
							height: 30rpx;
							position: absolute;
							top: 8rpx;
							left: 26rpx;
							z-index: 0;
						}
					}

					.scroll_xian {
						width: 64rpx;
						height: 2rpx;
						background: #ffe4d9;
						margin-top: 52rpx;
					}
				}
			}

			.sign_conent_btn {
				width: 100%;
				border-radius: 45rpx;
				background: #3394FF;
				color: #ffffff;
				text-align: center;
				padding: 22rpx 0;
				font-size: 32rpx;
			}
		}
	}
</style>
